<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="page__content page__content-with-aside application-subscriptions">
  <div class="main">
    <div class="page__box" *ngIf="applicationHasSharedKey() && sharedAPIKeyLoaded">
      <div class="page__box-title">
        <h3 class="title">
          {{ 'application.shared-key.title' | translate }}
        </h3>
      </div>
      <div class="page__box-content page__box-content_shared-key">
        <div class="application-subscriptions__shared-key-info">
          <div class="application-subscriptions__shared-key-info__row">
            <div class="application-subscriptions__shared-key-info__row__cell">
              {{ 'application.shared-key.message' | translate }}
            </div>
          </div>
          <div class="application-subscriptions__shared-key-info__row" *ngIf="!sharedAPIKey">
            <div class="application-subscriptions__shared-key-info__row__cell">
              {{ 'application.shared-key.no-key.message' | translate }}
            </div>
          </div>
          <div class="application-subscriptions__shared-key-info__row" *ngIf="!sharedAPIKey">
            <div class="application-subscriptions__shared-key-info__row__cell" *ngIf="canRenewSharedApiKey()">
              {{ 'application.shared-key.no-key.create' | translate }}
            </div>
            <div class="application-subscriptions__shared-key-info__row__cell" *ngIf="!canRenewSharedApiKey()">
              {{ 'application.shared-key.no-key.recommendation' | translate }}
            </div>
          </div>
        </div>

        <div class="application-subscriptions__shared-key-info" *ngIf="sharedAPIKey">
          <div class="application-subscriptions__shared-key-info__row">
            <div class="application-subscriptions__shared-key-info__row__cell">
              <h4 class="title">{{ 'application.shared-key.info.title' | translate }}</h4>
              <gv-input readonly clipboard [value]="sharedAPIKey.key"></gv-input>
            </div>
          </div>
          <div class="application-subscriptions__shared-key-info__row">
            <div class="application-subscriptions__shared-key-info__row__cell">
              <h5 class="title">{{ 'application.shared-key.info.created_at' | translate }}</h5>
              {{ sharedAPIKey.created_at | localizedDate : 'shortDate' : '--' }}
            </div>
            <div class="application-subscriptions__shared-key-info__row__cell" *ngIf="sharedAPIKey.expire_at">
              <h5 class="title">{{ 'application.shared-key.info.end_at' | translate }}</h5>
              <gv-relative-time [datetime]="sharedAPIKey.expire_at"></gv-relative-time>
            </div>
          </div>
        </div>

        <div
          class="application-subscriptions__shared-key-actions"
          *ngIf="canRenewSharedApiKey() || (canRevokeSharedApiKey && sharedAPIKey)"
        >
          <gv-confirm
            *ngIf="canRenewSharedApiKey()"
            [message]="'application.shared-key.renew.message' | translate"
            (:gv-confirm:ok)="renewSharedApiKey()"
            [cancelLabel]="'common.cancel' | translate"
            [okLabel]="'common.ok' | translate"
          >
            <gv-button primary class="application-subscriptions__shared-key-actions__button">{{
              'application.shared-key.renew.title' | translate
            }}</gv-button>
          </gv-confirm>

          <gv-confirm
            *ngIf="canRevokeSharedApiKey() && sharedAPIKey"
            [message]="'application.shared-key.revoke.message' | translate"
            danger
            (:gv-confirm:ok)="revokeSharedApiKey()"
            [cancelLabel]="'common.cancel' | translate"
            [okLabel]="'common.ok' | translate"
          >
            <gv-button outlined class="application-subscriptions__shared-key-actions__button">
              {{ 'application.shared-key.revoke.title' | translate }}</gv-button
            >
          </gv-confirm>
        </div>
      </div>
    </div>

    <div class="page__box">
      <div class="page__box-title">
        <h3 class="title">{{ 'application.subscriptions.title' | translate }}</h3>
        <gv-button link (:gv-button:click)="reset()">
          {{ 'common.reset' | translate }}
        </gv-button>
      </div>

      <div class="page__box-content">
        <form class="form" [formGroup]="form" (ngSubmit)="search()">
          <div class="grid form__control">
            <gv-select
              label="{{ 'application.subscriptions.filters.api.title' | translate }}"
              placeholder="{{ 'application.subscriptions.filters.api.label' | translate }}"
              [options]="apisOptions"
              formControlName="api"
              name="api"
              ngDefaultControl
            ></gv-select>

            <gv-select
              label="{{ 'application.subscriptions.filters.status.title' | translate }}"
              placeholder="{{ 'application.subscriptions.filters.status.label' | translate }}"
              [options]="statusOptions"
              multiple
              formControlName="status"
              name="status"
              ngDefaultControl
            ></gv-select>
          </div>

          <div class="form__actions">
            <gv-button
              type="submit"
              primary
              [loading]="isSearching"
              icon="general:search"
              class="application-subscriptions__search__button"
            >
              {{ 'common.search' | translate }}
            </gv-button>
          </div>
        </form>
      </div>

      <div class="page__box-footer page__box-footer_subscriptions">
        <gv-table
          order="api"
          [items]="subscriptions"
          [options]="options"
          [format]="format"
          [selected]="selectedSubscriptions"
          (:gv-table:select)="onSelectSubscription($event.detail.items[0])"
        ></gv-table>
      </div>
    </div>
  </div>

  <aside class="aside form">
    <div class="page__box" *ngIf="canCloseSubscription(selectedSubscription)">
      <div class="page__box-title">
        <h4 class="title">{{ 'application.subscriptions.selected.title' | translate }}</h4>
      </div>
      <div class="page__box-content">
        <div class="page__box-row">
          <span>{{ 'application.subscriptions.processed_at' | translate }}</span>
          {{ selectedSubscription.processed_at | localizedDate : 'shortDate' : '--' }}
        </div>
        <div class="page__box-row">
          <span>{{ 'application.subscriptions.start_at' | translate }}</span>
          {{ selectedSubscription.start_at | localizedDate : 'shortDate' : '--' }}
        </div>
        <div *ngIf="selectedSubscription.end_at" class="page__box-row">
          <span>{{ 'application.subscriptions.end_at' | translate }}</span>
          <gv-relative-time [datetime]="selectedSubscription.end_at"></gv-relative-time>
        </div>
      </div>
      <div class="page__box-footer form__actions">
        <gv-confirm
          *ngIf="canCloseSubscription(selectedSubscription)"
          [message]="'application.subscriptions.close.message' | translate"
          danger
          (:gv-confirm:ok)="closeSubscription(selectedSubscription.id)"
        >
          <gv-button link>{{ 'application.subscriptions.close.title' | translate }}</gv-button>
        </gv-confirm>
      </div>
    </div>
    <div class="page__box" *ngIf="getValidApiKeys(selectedSubscription) || getExpiredApiKeys(selectedSubscription)">
      <div class="page__box-title">
        <h4 class="title">{{ 'application.subscriptions.apiKey.title' | translate }}</h4>
      </div>

      <div class="page__box-content" *ngFor="let apiKey of getValidApiKeys(selectedSubscription)">
        <gv-input readonly clipboard [value]="apiKey.key"></gv-input>

        <div class="page__box-row">
          <span>{{ 'application.subscriptions.apiKey.created_at' | translate }}</span>
          {{ apiKey.created_at | localizedDate }}
        </div>

        <div *ngIf="endAt(apiKey)" class="page__box-row">
          <span>{{ 'application.subscriptions.apiKey.end_at' | translate }}</span>
          <gv-relative-time [datetime]="endAt(apiKey)"></gv-relative-time>
        </div>

        <div class="confirm__right">
          <gv-confirm
            *ngIf="canRenewApiKey(selectedSubscription) && !endAt(apiKey)"
            [message]="'application.subscriptions.renew.message' | translate"
            (:gv-confirm:ok)="renewApiKey(selectedSubscription.id)"
          >
            <gv-button primary>{{ 'application.subscriptions.renew.title' | translate }}</gv-button>
          </gv-confirm>

          <gv-confirm
            *ngIf="canRevokeApiKey(selectedSubscription)"
            [message]="'application.subscriptions.apiKey.revoke.message' | translate"
            danger
            (:gv-confirm:ok)="revokeApiKey(selectedSubscription.id, apiKey.key)"
            [cancelLabel]="'common.cancel' | translate"
            [okLabel]="'common.ok' | translate"
          >
            <gv-button outlined>
              {{ 'application.subscriptions.apiKey.revoke.label' | translate }}
            </gv-button>
          </gv-confirm>
        </div>
      </div>

      <div class="page__box-footer" id="expired-keys">
        <gv-button *ngIf="getExpiredApiKeys(selectedSubscription)" link (:gv-button:click)="toggleDisplayExpired()">
          <span *ngIf="displayExpiredApiKeys">{{ 'application.subscriptions.apiKey.expired.hide' | translate }}</span>
          <span *ngIf="!displayExpiredApiKeys">{{ 'application.subscriptions.apiKey.expired.show' | translate }}</span>
        </gv-button>
      </div>

      <div *ngIf="displayExpiredApiKeys" class="expired-keys">
        <div class="page__box-footer" *ngFor="let apiKey of getExpiredApiKeys(selectedSubscription)">
          <gv-input [value]="apiKey.key" disabled></gv-input>
          <div class="page__box-row">
            <span>{{ 'application.subscriptions.apiKey.created_at' | translate }}</span
            >{{ apiKey.created_at | localizedDate }}
          </div>
          <div class="page__box-row">
            <span>{{ 'application.subscriptions.apiKey.ended_at' | translate }}</span
            >{{ endAt(apiKey) | localizedDate : 'longDate' }}
          </div>
        </div>
      </div>
    </div>
  </aside>
</div>
